<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
<script type="module" src="../src/w2compat.js?globals"></script>
<script>
//<![CDATA[
$(function () {
    $('#grid').w2grid({
        name : 'grid',
        show : {
            toolbar     : true,
            footer      : true,
            lineNumbers : true,
            toolbarDelete: true,
            selectColumn : true
        },
        recordHeight: 40,
        selectType: 'cell',
        textSearch: 'contains',
        columns: [
            { field: 'a', text: '<div style="text-align: center">A</div>', size: '95px', searchable: true, editable: { type: 'div' }, frozen: true },
            { field: 'b', text: '<div style="text-align: center">B</div>', size: '95px', editable: { type: 'div' }, frozen: true},
            { field: 'c', text: '<div style="text-align: center">C</div>', size: '95px', editable: { type: 'div' }},
            { field: 'd', text: '<div style="text-align: center">D</div>', size: '95px', editable: { type: 'div' }},
            { field: 'e', text: '<div style="text-align: center">E</div>', size: '95px', editable: { type: 'text' }},
            { field: 'f', text: '<div style="text-align: center">F</div>', size: '95px', editable: { type: 'text' }},
            { field: 'g', text: '<div style="text-align: center">G</div>', size: '95px', editable: { type: 'text' }},
            { field: 'h', text: '<div style="text-align: center">H</div>', size: '95px', editable: { type: 'text' }},
            { field: 'j', text: '<div style="text-align: center">J</div>', size: '95px', editable: { type: 'text' }},
            { field: 'k', text: '<div style="text-align: center">K</div>', size: '95px', editable: { type: 'text' }},
            { field: 'l', text: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
            { field: 'l', text: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
            { field: 'l', text: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
            { field: 'l', text: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
            { field: 'l', text: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
            { field: 'l', text: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
            { field: 'l', text: '<div style="text-align: center">L</div>', size: '95px', editable: { type: 'text' }},
            { field: 'm', text: '<div style="text-align: center">M</div>', size: '95px', editable: { type: 'text' }}
        ],
        menu: ['some', 'other'],
        onContextMenu: function (event) {
            // console.log('context', event);
        },
        onSelectionExtend: function (event) {
            console.log('extend', event);
        },
        onColumnSelect: function (event) {
            console.log('column', event);
            // event.preventDefault();
        },
        onSelect: function (event) {
            // console.log('select', event);
        },
        onFocus(event) {
            console.log('focus');
        },
        onBlur(event) {
            console.log('blur');
        }
    });
    w2ui.grid.on('onContextMenu', function (event) {
        console.log('+++', event);
    });
    // add 10k records
    for (var i = 0; i < 3000; i++) {
        w2ui['grid'].records.push({
            recid : (i + 10),
            a: 'some',
            b: 'sample',
            k: 'text'
        });
    }
    // add toolbar button, appending one record every second.
    w2ui['grid'].toolbar.add([
        { type: 'break',  id: 'autoload-break' },
        { type: 'check',  id: 'autoload', caption: 'Add 1 Record/sec' },
    ]);
    var autoId = 0;
    setInterval(function() {
        if (!w2ui['grid'].toolbar.get('autoload').checked)
            return;
        ++autoId;
        w2ui['grid'].add({
            recid: autoId + 10000,
            a: 'some ',
            b: 'automatic',
            c: 'text: '+autoId
        });
    }, 1000);
    w2ui.grid.records[1].a = 'A1';
    w2ui.grid.records[5].a = 'A1';
    w2ui.grid.records[1].b = 'BBB1';
    w2ui.grid.records[1].d = 'This is some long text in cell C and some and event more then this';
    // w2ui.grid.records[1].e = '0';
    // w2ui.grid.records[1].f = '1';
    w2ui.grid.records[1].w2ui = { colspan: { d: 3 } };
    w2ui.grid.records[1].c = 'CC1';
    w2ui.grid.records[2].w2ui = { colspan: { e: 4 } };
    w2ui.grid.records[2].e = 'This is some long text in cell E';
    w2ui.grid.records[3].w2ui = { colspan: { e: 3 } };
    w2ui.grid.records[6].w2ui = { colspan: { e: 2 } };
    w2ui.grid.records[3].e = 'This is some long text in cell E';
    w2ui.grid.records[4].w2ui = { summary: true };
    w2ui.grid.records[1].w2ui = { style: { 1: 'background-color: red !important' }};
    w2ui.grid.refresh();
});
//]]>
</script>
</head>
<body>
    <div id="grid" style="width: 1024px; height: 568px;"></div>
</body>
</html>
